<template>
  <div class="container">
    <div class="rssb">
      <section class="bannerimg" :style="{background:'url('+'https://exam.zhonghaiqihang.com'+title.nav.bannerData[4].image+') no-repeat center'}"></section>
      <section class="rssc rssc1">
        <h3>精选人事社保服务</h3>
        <p class="xq">品质推荐 我们为您省钱</p>
        <div class="ct">
          <div class="ct1 af" :class="shu1==1?'':'ycd'">
            <div class="left" >
              <h4>企业社保 </h4>
              <p class="p1">社保代理我专业 专业服务您省心</p>
              <ul class="af">
                <li class="li1" v-for="(gs,id) in title.zym.service[0].threeServiceRes" :class="'li'+ (id+1)" :key="id" @click="xqymtz(gs.id,gs.pid)">
                  <h5>{{gs.servicename}}</h5>
                  <p class="p2">{{gs.remark}}</p>
                </li>
              </ul>
            </div>
            <div class="rt" @mouseover="shuff(2)">
              <h5>个人社保</h5>
              <p >足不出户，即享受专业社保服务</p>
            </div>
          </div>
          <div class="ct2 af" :class="shu1==2?'':'ycd'">
            <div class="left" style="position: relative; left: 20px" @mouseover="shuff(1)">
              <h5>企业社保</h5>
              <p>社保代理我专业 专业服务您省心</p>
            </div>
            <div class="rt">
              <h5>个人社保</h5>
              <p style="text-indent: 100px">足不出户，即享受专业社保服务</p>
              <ul class="af">
                <li class="li" v-for="(gs,id) in title.zym.service[1].threeServiceRes.slice(0,4)" :class="'li'+ (id+1)" :key="id" @click="xqymtz(gs.id,gs.pid)">
                  <h5>{{gs.servicename}}</h5>
                  <p class="p2">{{gs.remark}}</p>
                </li>
              </ul>

            </div>
          </div>
        </div>
      </section>
      <section class="rssc2">
        <div class="ct">
          <h3 style="margin-top: 88px">残保金减免方案</h3>
          <p class="p1">为您提供合法、安全、便捷的残保金减免服务</p>
          <a :href="'https://www.qiyebang.net.cn/ServiceDetails/'+137+'?name='+136">立即咨询</a>
        </div>
      </section>
      <section class="rssc3 rssc cssc2">
        <h3>工作居住证 </h3>
        <p class="xq">企业邦帮您 轻松获取工作居住证</p>
        <ul class="af">
          <li class="li1" v-for="(gs,id) in title.zym.service[2].threeServiceRes" :key="id" :class="'li'+(id+1)" style="padding: 0 40px 20px;margin-left: 35px;width: 216px;position: relative;left: 20px"><img :src="gs.fouriconimg?'https://exam.zhonghaiqihang.com/'+gs.fouriconimg:'~/assets/img/rssc3'+(id+1)+'.png'" >
            <p class="p1">{{gs.servicename}} </p>
            <p class="p2">{{gs.remark}}</p>
            <a :href="'https://www.qiyebang.net.cn/ServiceDetails/'+gs.id+'?name='+gs.pid" target="_blank" style="margin:30px 0 0 0;box-shadow: 28px 28px 68px rgba(0,0,0,.4)">立即咨询</a>
          </li>
        </ul>
      </section>
      <section class="rssc4 rssc">
        <h3>咨询管家</h3>
        <p class="xq">专业管家在线服务，一对一免费咨询</p>
        <ul class="af">
          <li  v-for="(gj,gji) in title.gj" :class="['li'+(gji+1),(gji+1)%5==0?'last':'']" :key="gji">
            <div class="nm" :style="{background:'url('+'https://exam.zhonghaiqihang.com'+gj.specialavatarone+') no-repeat'}">
              <h4>{{gj.username}}</h4>
              <p>{{title.zym.label}}</p>
            </div>
            <div class="hover af">
              <img :src="'https://exam.zhonghaiqihang.com'+gj.specialavatartwo" width="157" height="158">
              <div>
                <p class="p1">{{gj.username}}  <span>{{title.zym.label}}</span></p>
                <p class="p2">电话： <span>{{gj.mobile}}</span></p>
                <p class="p3">擅长: {{gj.major}}</p>
                <a :href="gj.cclink" class="zx" target="_blank">在线咨询</a>
              </div>
            </div>
          </li>

        </ul>

      </section>
      <my-heart></my-heart>
    </div>
    <my-ft></my-ft>

  </div>
</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';
  export default {
    name: 'HelloWorld',
    data () {
      return {
        selenv:false,
        title:null,
        shu1:1,
        dlzt:'',
        fuwu:1,
        sjsz:[]
      }
    },
    async asyncData ({ params }) {
    let nh = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Header/headerData`);
    let nh3 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Special/specialData`,{
      params:{
        serviceid:'116'
      }});
    let nh4 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Receptionist/receptionistData`);
    let data  = {nav:nh.data,zym:nh3.data,gj:nh4.data};
    return { title: data}
  },
  mounted:function(){
    console.log(this.title)


    $('.tbnava3').addClass('select');
    let a = document.cookie;
    let cookie = '';
    if(a.indexOf('userinfoRes')!=-1){
      let b = a.split('userinfoRes=');
      let c = b[1].split(';');
      cookie = c[0];
    }
    this.dlzt = cookie;
    $(document).ready(function(){
      $('.tbnava3').addClass('select');
    })

  },head () {
    return {
      title: this.title.zym.oneService.title,
      meta: [
        { hid: 'description', name: 'description', content: this.title.zym.oneService.descript },
        { hid: 'keywords', name: 'keywords', content:this.title.zym.oneService.keyword }
      ]
    }
  },
  methods:{
    shuff(e){
      this.shu1 = e;

    },
    xqymtz:function(e1,e2){
      let href = '/ServiceDetails/'+e1+'?name='+e2;
      window.open(href,'_blank');
    }
    ,zdwy:function(e){
      $('.tbnava3').addClass('select');
      if(e==1){
        this.selenv = true;
      }else if(e==0){
        this.selenv = false;
      }

    }
  }
  }
</script>

<style>

</style>
